<template>
  <!-- <div class="d-flex w-100 h-100 " :style="{flexDirection:data.position=='top'?'row':'row-reverse'}"> -->
  <div
    class="d-flex w-100 h-100 ball"
    :style="{ justifyContent: data.position == 'top' ? 'end' : 'start' }"
  >
    <div class="contain">
      <img v-for="bubble in bubbles" 
           :key="bubble.id" 
           :src="bubble.image" 
           :class="`bubble bubble-${bubble.id}`"
           :style="randomStyle(bubble.id)" />
      <!-- <img v-for="bubble in bubbles" :key="bubble.id" :src="bubble.image" :class="`bubble bubble-${bubble.id}`" /> -->
      <!-- 其他内容 -->
      <div class="contain_num">
        {{ data.value }}
      </div>
      <div>人防工程</div>
      <div>
        {{ data.name }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import littleBall from  "@/assets/image/underGround/littleBall.png"
import ball from "@/assets/image/underGround/ball.png";
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const bubbles = ref([
  // 创建一些初始气泡数据
  { id: 1, image: littleBall },
  { id: 2, image: littleBall },
  { id: 3, image: littleBall },
  { id: 4, image: littleBall },
  { id: 5, image: littleBall },
  { id: 6, image: littleBall },
  // 更多气泡...
]);
const randomStyle=(bubbleId:any)=> {
  const radius = 70; // 假设 .contain 宽度为 230px，半径为 115px
  const angle = Math.random() * 2 * Math.PI; // 随机角度
  const r = radius * Math.sqrt(Math.random()); // 随机半径，乘以 sqrt(random) 以获得均匀分布
  const x = r * Math.cos(angle); // 极坐标转笛卡尔坐标
  const y = r * Math.sin(angle);

  const size = Math.random() * 20 + 10; // 随机大小
  const animationDuration = Math.random() * 5 + 3; // 随机动画时长

  return {
    '--size': `${size}px`,
    '--x': `calc(50% + ${x}px - ${size / 2}px)`, // 调整位置，使其相对于中心
    '--y': `calc(50% + ${y}px - ${size / 2}px)`,
    '--duration': `${animationDuration}s`
  };
}
</script>

<style scoped lang="less">
.contain {position: relative;
  width: 230px;
  height: 230px;
  background: url("@/assets/image/underGround/ball_empty.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: "OPPOSans-Regular";
  font-size: 20px;
  color: rgba(198, 209, 219, 1);
  z-index: 3;
  &_num {
    font-family: "DIN";
    font-size: 40px;
    color: rgba(230, 253, 255, 1);
  }
}
.ball {
  flex-direction: column;
}
.bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  top: var(--y);
  animation: float var(--duration) ease-in-out infinite;
}

@keyframes float {
  0% { transform: translatey(0px); }
  50% { transform: translatey(-20px); }
  100% { transform: translatey(0px); }
}
</style>
